import React, { FC, useEffect, useState } from 'react'
import { Modal, Form, Input, DatePicker, Row, Col, InputNumber, Radio, Select } from 'antd'
import ItemClassification from '~/components/item-classification'
import { currencyType } from '~/constants'
import moment from 'moment'

const { TextArea } = Input
const { Option } = Select

const layout = {
  labelCol: { span: 10 },
  wrapperCol: { span: 14 }
}

const tailLayout = {
  labelCol: { span: 5 },
  wrapperCol: { span: 19 }
}

interface Values {
  title: string
  description: string
  modifier: string
}

interface CollectionCreateFormProps {
  visible: boolean
  onCreate: (values: Values) => void
  onCancel: () => void
  setMakeUpVisible: any
  makeUpData: any
}

const AddInformationForm: FC<CollectionCreateFormProps> = ({ visible, onCreate, onCancel, makeUpData }) => {
  const [form] = Form.useForm()
  const [isShowDeposit, setIsShowDeposit] = useState(false)
  const [isShowItemDictionary, setIsShowItemDictionary] = useState(false)
  const [isShowDrugDictionary, setIsShowDrugDictionary] = useState(false)
  const [isCheckUnitName2, setIsCheckUnitName2] = useState(false)
  const [isCheckUnitName3, setIsCheckUnitName3] = useState(false)
  const { setFieldsValue, resetFields } = form
  useEffect(() => {
    resetFields()
    setFieldsValue({
      ...makeUpData,
      acquireTime: makeUpData.acquireTime && moment(makeUpData.acquireTime),
      totalNumber: makeUpData?.itemStock?.totalNumber,
      unitName: makeUpData?.itemStock?.unitName,
      itemClassification: [
        makeUpData?.categoryId1,
        makeUpData?.categoryId2,
        makeUpData?.categoryId3,
        makeUpData?.categoryId4
      ].filter(item => item)
    })
    setIsCheckUnitName2(!!makeUpData?.itemStock?.unitName2)
    setIsCheckUnitName3(!!makeUpData?.itemStock?.unitName3)
    setIsShowDeposit(makeUpData?.categoryId1 === 'cw01' && makeUpData?.categoryId2 === 'cw0101')
    setIsShowItemDictionary(makeUpData?.categoryId3 === 'cw010101')
    // setIsShowDrugDictionary(makeUpData?.categoryId3 === 'cw020603')
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [makeUpData])
  return (
    <>
      <Modal
        visible={visible}
        width={800}
        title="补录物品信息"
        okText="确认"
        cancelText="取消"
        onCancel={onCancel}
        onOk={() => {
          form
            .validateFields()
            .then((values: any) => {
              onCreate(values)
            })
            .catch(info => {
              console.log('Validate Failed:', info)
            })
        }}
      >
        <Form
          validateTrigger="onBlur"
          labelAlign="right"
          {...layout}
          form={form}
          name="form_in_modal"
          initialValues={{ modifier: 'public' }}
        >
          <Row>
            <Col span={12}>
              <Form.Item name="itemName" label="物品名称" rules={[{ required: true, message: '请输入物品名称' }]}>
                {isShowItemDictionary ? (
                  <Select>
                    {[...currencyType].map(([key, value], index) => (
                      <Option key={index} value={key}>
                        {value}
                      </Option>
                    ))}
                  </Select>
                ) : (
                  <Input disabled />
                )}
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item name="totalNumber" label="物品数量" rules={[{ required: true, message: '请输入物品数量' }]}>
                <InputNumber disabled precision={2} style={{ width: 207 }} />
              </Form.Item>
            </Col>
          </Row>
          <Row>
            <Col span={12}>
              <Form.Item name="unitName" label="计量单位" rules={[{ required: true, message: '请输入计量单位' }]}>
                <Input disabled />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                name="itemClassification"
                label="物品分类"
                rules={[{ required: true, message: '请选择物品分类' }]}
              >
                <ItemClassification
                  onChange={(value: any) => {
                    setIsShowDeposit(value[0] === 'cw01' && value[1] === 'cw0101')
                    setIsShowItemDictionary(value[2] === 'cw010101')
                    // setIsShowDrugDictionary(value[2] === 'cw020603')
                    value[2] === 'cw010101' && setFieldsValue({ unitName: '元' })
                    value[2] === 'cw020201' && setFieldsValue({ unitName: '元' })
                    value[2] === 'cw020603' && setFieldsValue({ unitName: '克' })
                  }}
                />
              </Form.Item>
            </Col>
          </Row>
          {isShowDrugDictionary && (
            <Row>
              <Col span={12}>
                <Form.Item
                  name="itemdetail"
                  label="物品详细分类"
                  rules={[{ required: true, message: '请选择物品详细分类' }]}
                >
                  <Select>
                    <Option value="jack">Jack</Option>
                    <Option value="lucy">Lucy</Option>
                    <Option value="disabled" disabled>
                      Disabled
                    </Option>
                    <Option value="Yiminghe">yiminghe</Option>
                  </Select>
                </Form.Item>
              </Col>
            </Row>
          )}
          <Row>
            <Col span={12}>
              <Form.Item name="unitName2" label="二级计量单位">
                <Input
                  onChange={(e: any) => {
                    setIsCheckUnitName2(!!e.target.value)
                  }}
                />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                rules={[{ required: isCheckUnitName2, message: '请输入二级计量转换率' }]}
                name="unitRate2"
                label="二级计量转换率"
              >
                <InputNumber />
              </Form.Item>
            </Col>
          </Row>
          <Row>
            <Col span={12}>
              <Form.Item name="unitName3" label="三级计量单位">
                <Input
                  onChange={(e: any) => {
                    setIsCheckUnitName3(!!e.target.value)
                  }}
                />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                rules={[{ required: isCheckUnitName3, message: '请输入三级计量转换率' }]}
                name="unitRate3"
                label="三级计量转换率"
              >
                <InputNumber />
              </Form.Item>
            </Col>
          </Row>
          <Row>
            <Col span={12}>
              <Form.Item
                name="feature"
                label="物品特征"
                rules={[{ required: isShowItemDictionary, message: '请输入特征' }]}
              >
                <Input placeholder="请输入物品特征" />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item name="specs" label="物品规格">
                <Input placeholder="请输入物品规格" />
              </Form.Item>
            </Col>
          </Row>
          <Row>
            <Col span={12}>
              <Form.Item name="idInfo" label="识别信息">
                <Input placeholder="请输入识别信息" />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item name="acquireTime" label="执行时间" rules={[{ required: true, message: '请选择执行时间' }]}>
                <DatePicker
                  placeholder="请选择执行时间"
                  showTime={{ format: 'HH:mm' }}
                  format="YYYY-MM-DD HH:mm:ss"
                  style={{ width: 220 }}
                />
              </Form.Item>
            </Col>
          </Row>
          <Row>
            <Col span={12}>
              <Form.Item
                name="propertyFlag"
                label="是否具有财产属性"
                rules={[{ required: true, message: '请选择是否具有财产属性' }]}
              >
                <Radio.Group>
                  <Radio value={1}>是</Radio>
                  <Radio value={0}>否</Radio>
                </Radio.Group>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                name="valuableFlag"
                label="是否贵重物品"
                rules={[{ required: true, message: '请选择是否贵重物品' }]}
              >
                <Radio.Group>
                  <Radio value={1}>是</Radio>
                  <Radio value={0}>否</Radio>
                </Radio.Group>
              </Form.Item>
            </Col>
          </Row>
          <Row>
            <Col span={12}>
              <Form.Item
                name="vulnerableFlag"
                label="是否易损益易贬值物品"
                rules={[{ required: true, message: '请选择是否易损益易贬值物品' }]}
              >
                <Radio.Group>
                  <Radio value={1}>是</Radio>
                  <Radio value={0}>否</Radio>
                </Radio.Group>
              </Form.Item>
            </Col>
          </Row>
          {isShowDeposit && (
            <>
              <Row>
                <Col span={12}>
                  <Form.Item
                    name="depositUserName"
                    label="存入人"
                    rules={[{ required: true, message: '请输入存入人' }]}
                  >
                    <Input placeholder="请输入存入人" />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item
                    name="depositTime"
                    label="存入日期"
                    rules={[{ required: true, message: '请选择存入日期' }]}
                  >
                    <DatePicker
                      placeholder="请选择存入日期"
                      showTime={{ format: 'HH:mm' }}
                      format="YYYY-MM-DD HH:mm:ss"
                      style={{ width: 220 }}
                    />
                  </Form.Item>
                </Col>
              </Row>
              <Row>
                <Col span={12}>
                  <Form.Item name="accountNo" label="存入账户" rules={[{ required: true, message: '请输入账户' }]}>
                    <Input placeholder="请输入账户" />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item name="amount" label="入账单据号" rules={[{ required: true, message: '请输入入账单据号' }]}>
                    <Input placeholder="请输入入账单据号" />
                  </Form.Item>
                </Col>
              </Row>
            </>
          )}
          <Row>
            <Col span={24}>
              <Form.Item name="remark" label="备注" {...tailLayout}>
                <TextArea rows={4} placeholder="请输入备注" style={{ width: 645 }} />
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </Modal>
    </>
  )
}

export default AddInformationForm
